<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>发布文章</span>
      </div>
      <!-- 发布文章的表单 -->
      <el-form label-width="120px">
        <!-- 文章的标题 -->
        <el-form-item label="标题：">
          <el-input placeholder='文章名称' style="width:400px"></el-input>
        </el-form-item>
        <!-- 文章内容 -->
        <el-form-item label="内容：">
          <!-- 3、使用局部组件 -->
          <quill-editor :options="editorOption"></quill-editor>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// 导入富文本相关的样式和组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  data () {
    return {
      // 富文本相关配置选项
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  // 配置局部组件
  components: {
    quillEditor
  }
}
</script>
